<template>
    <div class="total">
        <el-image :src="pic" fit="contain" lazy />
        <div class="edit">

        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

type Props = {
    pic: String,
}
defineProps<Props>()
const dialogFormVisible = ref(false)

</script>

<style lang="scss" scoped>
$item-height: 0.36rem;
$item-width: 0.6rem;
$a-font-size: 0.08rem;

.total {
    break-inside: avoid;
    max-width: $item-width*3;
    max-height: $item-height*3;
    color: #425551;

    img {
        width: 100%;
        break-inside: avoid;
        margin-bottom: $item-height;
    }

    .edit {
        margin: $item-height*0.2 $item-height*0.2;
        text-align: center;
    }

}
</style>